<template>
  <div class="app-container">
    <section class="table-bar">
      <el-input v-model="query.keyword" style="width: 250px" placeholder="标题" />
      <el-button style="margin: 10px;" type="success" @click="fetchData">查询</el-button>
      <el-button style="margin: 10px;" @click="handleAdd">新增</el-button>
      <el-select v-model="query_status" @change="change_status">
        <el-option value="0" label="全部" />
        <el-option value="1" label="已上架" />
        <el-option value="2" label="未上架" />
      </el-select>
      <el-table
        v-loading="loading"
        :data="data"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="期刊标题" width="100">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column align="center" label="价格" min-width="80">
          <template slot-scope="scope">
            <div v-for="(pa , pi) in scope.row.price_arr" :key="pi">{{ pa }}<br></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="期刊方向">
          <template slot-scope="scope">{{ scope.row.direction.join(',') }}</template>
        </el-table-column>
        <el-table-column align="center" label="审核标准">
          <template slot-scope="scope">{{ scope.row.audit_standard }}</template>
        </el-table-column>
        <el-table-column align="center" label="周期">
          <template slot-scope="scope">{{ scope.row.cycle }}</template>
        </el-table-column>
        <el-table-column align="center" label="上网情况">
          <template slot-scope="scope">{{ scope.row.included_database.join(',') }}</template>
        </el-table-column>
        <el-table-column align="center" label="封面">
          <template slot-scope="scope">
            <img :src="scope.row.cover " style="width: 100px" alt="">
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="排序" >
          <template slot-scope="scope">
            <el-input @change="change_sort(scope.row)" v-model="scope.row.sort" />
          </template>
        </el-table-column> -->
        <el-table-column
          class-name="status-col"
          label="操作"
          width="220"
          align="center"
        >
          <template slot-scope="scope" style="display: flex;">
            <el-button v-show="role == '超级管理员' || role == '管理员' " size="mini" type="primary" @click="sort_top(scope.row)">置顶
            </el-button>
            <el-button v-show="role == '超级管理员' || role == '管理员' " size="mini" type="primary" @click="change_sort(scope.row,0)">取消置顶
            </el-button>
            <el-button size="mini" type="success" @click="detail(scope.row.id)">详情
            </el-button>
            <el-button size="mini" type="success" @click="detail2(scope.row.id)">刊期
            </el-button>
            <el-button v-show="role == '超级管理员' || role == '管理员' " size="mini" type="success" @click="updatePrice(scope.row)">改价
            </el-button>
            <el-button v-show="role == '超级管理员' || role == '管理员' " size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
            </el-button>
            <el-button v-if="!scope.row.suspend_receiving" v-show="role == '超级管理员' || role == '管理员' " size="mini" type="success" @click="updateStatus(scope.row.id,1)">上架
            </el-button>
            <el-button v-else v-show="role == '超级管理员' || role == '管理员' " size="mini" type="danger" @click="updateStatus(scope.row.id,0)">下架
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section class="pagination-bar">
      <el-pagination
        background
        :current-page="query.page"
        :page-sizes="[100, 50, 30, 10, 1]"
        :page-size="query.limit"
        layout="sizes, prev, pager, next"
        :total="count"
        @size-change="(limit) => {query.limit = limit; fetchData()}"
        @current-change="(page) => {query.page = page; fetchData()}"
      />
    </section>
    <el-dialog title="新增" :visible.sync="addDialogVisible">
      <el-input v-model="tempData.title" placeholder="期刊标题" />
      <el-button @click="add">新增</el-button>
    </el-dialog>

    <el-dialog title="修改价格" :visible.sync="updatePriceVisible">
      <el-table
        :data="tempPriceData.data"
        border
        highlight-current-row
      >
        <el-table-column align="center" label="角色">
          <template slot-scope="scope">{{ scope.row.role.show_title }}</template>
        </el-table-column>
        <el-table-column align="center" label="价格">
          <template slot-scope="scope"> <el-input v-model.number="scope.row.price " type="number" /></template>
        </el-table-column>
      </el-table>
      <el-button @click="updatePriceConfirm">修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  data() {
    return {
      data: '',
      loading: false,
      query: {
        page: 1,
        limit: 10,
        keyword: '',
        status: 3
      },
      query_status: '全部',
      count: 0,
      tempData: {
        title: ''
      },
      addDialogVisible: false,
      tempPriceData: {
        id: '',
        data: ''
      },
      updatePriceVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    updateStatus(id, status) {
      api.periodical.updateStatus({ id: id, status: status }).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '设置成功'
          })
          this.fetchData()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    sort_top(r) {
      console.log(this.data[0].sort)
      this.change_sort(r, (this.data[0].sort + 1))
    },
    change_status(value) {
      console.log(value)
      if (value === '1') {
        this.query_status = '已上架'
      } else if (value === '2') {
        this.query_status = '未上架'
      } else {
        this.query_status = '全部'
      }

      this.query.status = value
      this.fetchData()
    },
    change_sort(r, f = null) {
      console.log(r)
      let num = r.sort
      if (f !== null) {
        num = f
      }
      const sortData = {
        id: r.id,
        sort: num
      }
      api.periodical.updateSort(sortData).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '排序成功'
          })
          this.fetchData()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    updatePrice(row) {
      this.updatePriceVisible = true
      this.tempPriceData.id = row.id
      this.tempPriceData.data = row.price
    },
    updatePriceConfirm() {
      api.periodical.updatePrice(this.tempPriceData).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.fetchData()
          this.updatePriceVisible = false
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    fetchData() {
      api.periodical.list(this.query).then(res => {
        if (res.err_no === 0) {
          this.count = res.data.count
          this.data = res.data.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    detail(id) {
      this.$router.push({
        name: 'periodicalDetail',
        query: {
          id: id
        }
      })
    },
    detail2(id) {
      this.$router.push({
        name: 'periodicalDetail2',
        query: {
          id: id
        }
      })
    },
    handleDelete(id) {
      this.$confirm('确定删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.periodical.deletePeriodical({ id: id }).then(res => {
          if (res.err_no === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.err_msg
            })
          }
        })
      })
    },
    handleAdd() {
      this.addDialogVisible = true
      this.tempData = {
        title: ''
      }
    },
    add() {
      api.periodical.addPeriodical(this.tempData).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '新增成功，请完善信息'
          })
          this.$router.push({
            name: 'periodicalDetail',
            query: {
              id: res.data.id
            }
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>
<style>
  button{
    margin:5px !important;
  }
</style>
